<template>
	<view>
		<u-navbar leftIconSize="0" bgColor="transparent" :placeholder="true"></u-navbar>
		<view class="serve-box">
			<view class="serve-top zdy-flex zdy-flex-between">
				<view class="">
					<view class="title">给您提供最贴心的服务</view>
					<view class="goRoom">去入住</view>
				</view>
				<image src="/static/img/serve/xxbj.png" style="width: 195rpx; height: 185rpx" mode=""></image>
			</view>
			<view class="tags-box zdy-flex zdy-flex-between">
				<view class="tags-box-item" v-for="item in tagsList" :key="item.img">
					<image :src="item.img" mode=""></image>
					<view class="">{{ item.label }}</view>
				</view>
			</view>
			<view class="checkIn-box">
				<view class="checkIn-title">入住权益</view>
				<view class="checkIn-describe">入住可畅想多种权益</view>
				<view class="zdy-flex zdy-flex-wrap zdy-flex-between">
					<view class="checkIn-item zdy-flex zdy-flex-center" v-for="item in checkInList" :key="item.label">
						<image :src="item.img" style="width: 55rpx; height: 55rpx; margin-right: 10rpx" mode=""></image>
						<view class="">
							<view class="label">{{ item.label }}</view>
							<view class="describe">{{ item.describe }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="member">
				<view class="title">您有一张会员卡待开通</view>
				<view class="card">
					<view class="card-title">开通会员，畅游5城不用愁！</view>
					<view class="card-describe">开通会员，畅游5城不用愁！</view>
				</view>
			</view>
			<view class="checkIn-box">
				<view class="checkIn-title zdy-flex zdy-flex-between-center">
					<span>帮助中心</span>
					<u-icon size="12" name="arrow-right" bold></u-icon>
				</view>
				<view class="checkIn-describe">入住可畅想多种权益</view>
				<view class="help-item zdy-flex zdy-flex-center zdy-flex-end" v-for="item in 3" :key="item">
					<image src="/static/img/serve/bz.png" style="width: 28rpx; height: 28rpx; margin-right: 15rpx" mode=""></image>
					<span>临时出门，忘记带房卡，怎么解决？</span>
					<u-icon size="12" name="arrow-right" bold></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showNav: true,
			tagsList: [
				{ img: '/static/img/serve/bsl.png', label: '伴手礼' },
				{ img: '/static/img/serve/yyqj.png', label: '预约清洁' },
				{ img: '/static/img/serve/csyd.png', label: '餐食预订' },
				{ img: '/static/img/serve/mp.png', label: '门票' },
				{ img: '/static/img/serve/kf.png', label: '客服' }
			],
			checkInList: [
				{ img: '/static/img/serve/ksrz.png', label: '快速入住', describe: '在线登记，快速入住' },
				{ img: '/static/img/serve/jsxy.png', label: '及时响应', describe: '有事联系，无事退朝' },
				{ img: '/static/img/serve/zzxf.png', label: '自助选房', describe: '提前锁定，心仪房间' },
				{ img: '/static/img/serve/zxxz.png', label: '在线续租', describe: '有事联系，无事退朝' }
			]
		};
	},
	onPageScroll(e) {
		this.showNav = e.scrollTop < 5;
	},
	methods: {}
};
</script>

<style>
page {
	background: linear-gradient(180deg, #aff9f4 0%, #e6f8f7 100%);
	background-attachment: fixed;
}
</style>

<style scoped lang="scss">
.serve-box {
	margin: 30rpx;
	margin-top: -70rpx;
	padding-bottom: 50rpx;
	.serve-top {
		.title {
			margin-bottom: 30rpx;
			font-weight: bold;
			font-size: 34rpx;
		}
		.goRoom {
			width: fit-content;
			border-radius: 8rpx;
			font-weight: bold;
			background-color: #85dcd6;
			font-size: 30rpx;
			padding: 18rpx 76rpx;
		}
	}
	.tags-box {
		background-color: #e9fdfa;
		font-size: 24rpx;
		padding: 40rpx;
		border-radius: 16rpx;
		border: 2px solid #ffffff;
		image {
			margin-bottom: 25rpx;
			width: 55rpx;
			height: 55rpx;
		}
		.tags-box-item {
			text-align: center;
		}
	}
	.checkIn-box {
		margin-top: 40rpx;
		padding: 35rpx 25rpx 25rpx;
		background: #ffffff;
		border-radius: 10rpx;
		.checkIn-title {
			margin-bottom: 15rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
		.checkIn-describe {
			margin-bottom: 30rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #999999;
		}
		.help-item {
			margin-bottom: 30rpx;
			span {
				margin-right: auto;
			}
		}
		.help-item:last-of-type {
			margin-bottom: 0;
		}
		.checkIn-item {
			width: 48%;
			margin-bottom: 15rpx;
			padding: 30rpx 20rpx;
			background: #eff9f8;
			border-radius: 12rpx;
			.label {
				font-weight: bold;
				font-size: 26rpx;
			}
			.describe {
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.member {
		margin-top: 25rpx;
		background: #ffffff;
		border-radius: 10rpx;
		padding: 35rpx 25rpx 25rpx;
		.title {
			margin-bottom: 30rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
		.card {
			background-image: url('/static/img/serve/kthy.png');
			background-size: cover; /* 背景图片覆盖整个盒子 */
			background-position: center; /* 背景图片居中 */
			padding: 35rpx 30rpx 40rpx;
			width: 100%;
			height: 135rpx;
			.card-title {
				margin-bottom: 15rpx;
				font-weight: bold;
				font-size: 26rpx;
				color: #cbad82;
			}
			.card-describe {
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
}
</style>
